<template>
  <div class="pd-20">
    <div class="c-202020 f-s-16 f-w-bold">发货信息</div>
    <div class="c-5E6163 f-s-14">
      <el-row>
        <el-col :span="8" class="mt-lg"> 发货单号：{{ item.id }} </el-col>
        <el-col :span="16" class="mt-lg" v-if="item.carOutApply">
          <span>物流状态：</span>
          <span class="deliver-goods_status">{{
            getStatusLabel(orderLogisticsType, item.carOutApply.status)
          }}</span>
        </el-col>
        <el-col :span="8" class="mt-lg flex" v-if="form.product">
          <div>商品名称：</div>
          <div>
            <div>{{ form.product.productTitle }}</div>
            <div class="mt-20 goods-img">
              <img
                :src="form.product.productDetail.prodcutPicList.thumbnailUrl"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="16" class="mt-lg" v-if="item.carOutApply">
          <el-timeline>
            <el-timeline-item
              color="#FA9814"
              v-for="(d, j) in item.approvalLogList"
              :key="j"
            >
              <div class="c-5E6163">{{ d.nodeName }}</div>
              <div class="timeline mt-sm">
                <div class="timeline-item">
                  <span>{{ filters.dateYMDHMSFormat(d.timeCreate) }}</span>
                  <span class="ml-lg">{{ d.nodeComments }}</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <div class="deliver-goods_info">
        <el-row>
          <el-col :span="6">
            <div class="c-202020 f-s-15 f-w-bold">车架号信息</div>
            <div class="mt-lg" v-for="(d, j) in item.vinList" :key="j">
              <span>车架号：</span>
              <span>{{ d }}</span>
            </div>
          </el-col>
          <el-col :span="6" v-if="item.transportList">
            <div class="c-202020 f-s-15 f-w-bold">出口信息</div>
            <div class="mt-lg">提单号：{{ item.transportList.seaBillNo }}</div>
            <div class="mt-lg">
              船名/航次：{{ item.transportList.shipName }}/{{
                item.transportList.shipNo
              }}
            </div>
            <div class="mt-lg">
              预计到港日：{{
                filters.dateYMDFormat(item.transportList.estimateArrivalDate)
              }}
            </div>
            <div class="mt-lg">
              出口日期：{{
                filters.dateYMDFormat(item.transportList.exportDate)
              }}
            </div>
            <div class="mt-lg">
              <span>装箱信息：</span>
              <c-packing-info v-model="item.transportContainerList" />
            </div>
            <div class="c-202020 f-s-15 f-w-bold mt-lg">附件</div>
            <c-file-view
              :name="item.label"
              class="mt-lg"
              v-for="(item, index) in getExportFiles(
                item.transportFilesList,
                item.transportList.carOutApplyId,
                [1]
              )"
              :urls="item.list"
              :key="index"
            />
          </el-col>
          <el-col :span="6" v-if="form.paymentBill && form.paymentBill.payBankName">
            <div class="c-202020 f-s-15 f-w-bold">支付信息</div>
            <div class="mt-lg">
              付汇银行：{{ form.paymentBill.payBankName }}
            </div>
            <div class="c-202020 f-s-15 f-w-bold mt-lg mb-sm">附件</div>
            <c-file-view
              name="付汇凭证"
              class="mt-lg"
              :urls="form.paymentBill.payProofUrl"
            />
          </el-col>
          <el-col :span="6" v-if="form.buyerPickupApply">
            <div class="c-202020 f-s-15 f-w-bold">提车信息</div>
            <div class="mt-lg">仓库名称：{{form.buyerPickupApply.pickupAddress}}</div>
            <!-- <div class="mt-lg">入库日期：{{ filters.dateYMDFormat(form.buyerPickupApply.timeCreate)}}</div> -->
            <div class="c-202020 f-s-15 f-w-bold mt-lg mb-sm">附件</div>
            <c-file-view name="提车凭证" class="mt-lg" 
             :urls="form.buyerPickupApply.pickupProofUrl"/>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup>
import cFileView from "@/components/Upload/FileView.vue";
import cPackingInfo from "./PackingInfo.vue";
import { orderLogisticsType, getStatusLabel } from "@/utils/status.js";
import { getExportFiles } from "@/utils/index.js";
import { computed } from "vue";
const props = defineProps({
  modelValue: {
    type: Object,
    default: {},
  },
  form: {
    type: Object,
    default: {},
  },
});
const item = computed({
  get: () => {
    return props.modelValue;
  },
});
</script>

<style lang="less" scoped>
.c-5E6163 {
  color: #5e6163;
}
.deliver-goods_status {
  color: #fa9814;
}
.deliver-goods_info {
  background: #f6f8fa;
  padding: 20px;
}
.goods-img {
  width: 96px;
  height: 72px;
}
.timeline {
  background: #f6f8fa;
  border-radius: 3px;
  color: #808080;
  font-size: 12px;
  .timeline-item {
    padding: 12px;
  }
}
</style>